<template>
  <div>
    <div class="cart">
      <!-- 顶部 -->
      <common-head title="购物车"/>
      <div class="content">
        <div class="nullpic" v-if="cart.items.length===0">
          <img src="../../assets/img/cart_null.png" alt="" >
        </div>
        <div class="items">
          <div
            class="item"
            v-for="(item,index) in cart.items"
            :key="item.id"
          >
            <van-swipe-cell>
            <van-checkbox v-model="item.checked" @click="clickItemChecked(index)" checked-color="red" />
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :title="item.name"
              :thumb="item.pic"
            >
              <template #footer>
                <van-stepper v-model="item.num" min="1" @change="changeNum" />
              </template>
            </van-card>
              <template #right>
                <van-button square text="删除" type="danger" @click="delItem(index)" class="delete-button" />
              </template>
            </van-swipe-cell>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <!-- 提交订单栏 -->
      <van-submit-bar :price="cart.total*100" button-text="提交订单" @submit="order">
        <van-checkbox @click="allChecked" v-model="cart.isAllChecked">全选</van-checkbox>
      </van-submit-bar>
      <my-tabbar/>
    </div>
  </div>
</template>

<script>
import MyTabbar from 'components/MyTabbar'
import CommonHead from 'components/CommonHead'
import { mapState, mapMutations } from 'vuex'
import { Dialog, Toast } from 'vant' // 这两个是函数，需要引用才能用
export default {
  created () {
    // 在created周期中调用
    this.calc_total() // 计算总价格
  },
  methods: {
    allChecked () {
      // 全选影响单选
      this.allChecked_to_singleChecked(this.cart.isAllChecked)
      this.calc_total()
    },
    clickItemChecked (index) {
      /**
       * this.cart.items[index].checked // 深克隆后的数据
       * 点击改变单个商品选中状态
       * 商品单选影响全选，若单选全选中，则全选按钮选中；若单选不全选中，则全选按钮不选中
       */
      this.single_checked({ index, checked: this.cart.items[index].checked })
      this.calc_total()
      // 全部选中，则全选选中，有一个不选中，全选不选中
      // const allChecked = this.cart.items.every(item => item.checked)
      const allChecked = this.cart.items.every(item => item.checked)
      this.all_checked(allChecked)
    },
    delItem (index) {
      // 删除商品
      Dialog.confirm({
        title: '删除商品',
        message: '您确认要删除吗?',
        _: Toast('删除成功')
      }).then(() => {
        this.del_item(index)
        this.calc_total()
      }).catch(() => {
        Toast('取消成功')
      })
    },
    changeNum (value) {
      // this.calc_total()
      /**
       * 1.重新设置vuex中商品数据
       * 2.再次调用计算总价格
       */
      this.set_cart(this.cart) // 把改变后的 this.cart 传入vuex
      this.calc_total()
    },
    order () {
      alert('前往订单页')
    },
    // mapMutations放在methods中
    ...mapMutations('cart', ['calc_total', 'set_cart', 'del_item', 'single_checked', 'all_checked', 'allChecked_to_singleChecked'])
  },
  components: {
    MyTabbar,
    CommonHead
  },
  computed: {
    ...mapState({
      /**
       * state.cart.cart进行深克隆，不然与Vuex中state存在引用关系，点击步进器不通过vuex的mutations方法也会改变其中的num值
       */
      cart: state => JSON.parse(JSON.stringify(state.cart.cart))
    })
  }
}
</script>

<style lang="scss" scoped>
/deep/.cart{
  background: #f5f5f5;
  .content{
    margin: 50px 0;
    background: #f1f1f1;
    .nullpic{
      width: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .items{
      /deep/.van-swipe-cell__wrapper{
        display: flex;
        align-items: center;
        background: #bbd7f3;
        margin: 5px 0;
        .van-card{
          background:#bbd7f3;
        }
      /deep/.van-checkbox{
          margin: 0 10px;
        }
        .van-card{
          flex:1
        }
      }
      .goods-card {
        margin: 0;
      }
      .delete-button {
        height: 100%;
      }
    }
  }
  .van-submit-bar{
    position: fixed;
    left: 0;
    bottom: 50px;
  }
}
</style>
